<template>
  <div class="flex">
    <div class="chart" ref="chartGauge"></div>
    <div class="chart" ref="chartMap"></div>
    <div class="chart" ref="chartTree"></div>
  </div>
  <div class="flex">
    <div class="chart" ref="chartTreeMap"></div>
    <div class="chart" ref="chartPie"></div>
    <div class="chart" ref="chartGraph"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import china from 'echarts4/map/json/china.json'
import {onMounted, onUnmounted, ref} from "vue";

const chartGauge = ref()
const chartMap = ref()
const chartTree = ref()
const chartTreeMap = ref()
const chartPie = ref()
const chartGraph = ref()

echarts.registerMap('china', china)
let map = null
let gauge = null
let tree = null
let treeMap = null
let pie = null
let graph = null

function init() {

  gauge = echarts.init(chartGauge.value)
  gauge.setOption({
    series: [{
      name: "仪表盘",
      type: "gauge",
      min: 0,
      max: 240,
      axisLine: {
        // roundCap:true,
        lineStyle: {
          width: 10,
          color: [
            [0.15, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      detail: {
        formatter: "{value} km/h",
        color: 'inherit'
      },
      data: [{
        value: 100,
      }]
    }]
  })

  pie = echarts.init(chartPie.value)
  pie.setOption({
    tooltip: {},
    series: [
      {
        name: 'Pie Chart',
        type: 'pie',
        roseType: 'area',
        itemStyle: {
          borderRadius: 6
        },
        data: [
          {value: 24, name: '区间1'},
          {value: 18, name: '区间2'},
          {value: 22, name: '区间3'},
          {value: 30, name: '区间4'},
          {value: 28, name: '区间5'},
          {value: 26, name: '区间6'},
          {value: 25, name: '区间7'},
          {value: 20, name: '区间8'}
        ]
      }
    ]
  })

  graph = echarts.init(chartGraph.value)
  graph.setOption({
    legend: {},
    tooltip: {},
    series: {
      type: 'graph',
      layout: 'force',
      symbolSize: 25,
      roam: true,
      edgeSymbol: ['', 'arrow'],
      force: {
        repulsion: 800
      },
      data: [
        {
          id: 1,
          name: 'node 1',
          value: 10,
          category: 0
        },
        {
          id: 2,
          name: 'node 2',
          value: 20,
          category: 1
        },
        {
          id: 3,
          name: 'node 3',
          value: 40,
          category: 1
        },
        {
          id: 4,
          name: 'node 4',
          value: 20,
          category: 2
        },
        {
          id: 5,
          name: 'node 5',
          value: 20,
          category: 3
        }
      ],
      links: [
        {
          source: '1',
          target: '2'
        },
        {
          source: '1',
          target: '5'
        },
        {
          source: '2',
          target: '3'
        },
        {
          source: '2',
          target: '4'
        },
        {
          source: '4',
          target: '2'
        },
      ],
      categories: [
        {name: 'A'},
        {name: 'B'},
        {name: 'C'},
        {name: 'D'},
      ]
    }
  })

  treeMap = echarts.init(chartTreeMap.value)
  treeMap.setOption({
    tooltip: {},
    series: {
      type: "treemap",
      levels: [
        {
          itemStyle: {
            borderWidth: 0,
            gapWidth: 2
          }
        },
      ],
      data: [
        {
          name: 'data',
          value: 750,
          children: [
            {
              name: 'mysql',
              value: 100,
            },
            {
              name: 'cache',
              value: 100,
            },
            {
              name: 'www',
              value: 550,
              children: [
                {
                  name: 'web1',
                  value: 220,
                },
                {
                  name: 'web1',
                  value: 330,
                },
              ]
            }
          ]
        },
        {
          name: 'dev',
          value: 185,
          children: [
            {
              name: 'vda1',
              value: 80,
            },
            {
              name: 'vdb1',
              value: 105,
            }
          ]
        },
        {
          name: 'tmpfs',
          value: 45,
          children: [
            {
              name: 'tmp1',
              value: 20,
            },
            {
              name: 'tmp2',
              value: 25,
            }
          ]
        }
      ]
    }
  })

  tree = echarts.init(chartTree.value)
  tree.setOption({
    series: [{
      type: "tree",
      data: [
        {
          name: "root",
          children: [
            {
              name: "Child A",
              children: [
                {
                  name: "Leaf C"
                }, {
                  name: "Leaf D"
                }, {
                  name: "Leaf E"
                }
              ]
            },
            {
              name: "Child B",
              children: [
                {
                  name: "Leaf G"
                }, {
                  name: "Leaf H"
                }
              ]
            },
            {
              name: "Child D"
            }
          ]
        }
      ],
      label: {
        position: "right"
      }
    }]
  })

  map = echarts.init(chartMap.value)
  map.setOption({
    // title: {
    //   text: '地图',
    //   padding:10,
    //   left:'center'
    // },
    tooltip: {},
    visualMap: {
      type: 'piecewise',
      min: 0,
      max: 500,
      inRange: {
        color: ['#99ffff', '#00aa00']
      }
    },
    series: [
      {
        name: '变化量',
        type: 'map',
        map: 'china',
        roam: true,
        data: [
          {name: '北京', value: 100},
          {name: '陕西', value: 140},
          {name: '湖北', value: 240},
          {name: '四川', value: 320},
          {name: '广东', value: 500},
        ]
      }
    ]
  })

  // window.addEventListener('resize', map.resize())
}


onMounted(() => {
  init()
})

onUnmounted(() => {
  map.dispose()
  gauge.dispose()
  tree.dispose()
  treeMap.dispose()
  pie.dispose()
  graph.dispose()
})
</script>

<style scoped>
.chart {
  width: 33%;
  height: 450px;
}
</style>